<!-- 搜索表单 -->
<template>
  <div class="ele-page-header">
    <div class="selectTime flex-align-center">
      <!-- <div class="orderStatus">订单状态:</div> -->
      <ul class="timeTab"
          v-for="(item, index) in orderStatusArr"
          :key="index">
        <li :class="[currentIndex == index ? 'active' : '']"
            @click="switchTimeTab(index,item.id)">{{ item.value }}</li>
      </ul>

    </div>
  </div>
</template>
  
  <script>

import { templateList } from '@/api/HomePageSettings/index'
const DEFAULT_WHERE = {
  title: ''
};

export default {
  name: 'RoleSearch',
  data () {
    return {
      currentIndex: 0,
      // 表单数据
      where: { ...DEFAULT_WHERE },
      orderStatusArr: [
        {
          value: '模版一',
          id: 1
        },

        {
          value: '模版二',
          id: 2
        },

        {
          value: '模版三',
          id: 3
        },

        {
          value: '模版四',
          id: 4
        },

      ]



    };
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      const res = await templateList()
      if (res.code == 0) {
        this.orderStatusArr = res.data.map((item) => {
          return {
            value: item.name,
            id: item.id
          }
        })
      }
      this.$emit('currentIndex', { template_id: this.orderStatusArr[0].id });

    },
    switchTimeTab (index, id) {
      console.log(index)
      this.currentIndex = index;
      this.$emit('currentIndex', { template_id: id });

    },
    /* 搜索 */
    search () {

      //   this.$emit('search', this.where);
    },
    /*  重置 */
    reset (formName) {
      this.$refs[formName].resetFields();
      this.where = {};
      this.$emit('search', this.where);
    }
  }
};
  </script>
  <style lang="less" scoped>
.selectTime {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .timeTab {
    display: flex;
    align-items: center;
    margin-right: 20px;
    li {
      list-style-type: none;
      display: block;
      width: 110px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border: 1px solid #d9d9d9;
      border-radius: 10px;
    }
    .active {
      width: 110px;
      height: 38px;
      border-radius: 6px;
      background: #1890ff;
      color: #fff;
      text-align: center;
      line-height: 38px;
    }
  }
  .orderStatus {
    min-width: 77px;
    height: 34px;
    font-size: 14px;
    line-height: 34px;
  }
  .filterDate {
    text-align: center;
    line-height: 34px;
    width: 90px;
    height: 34px;
    font-size: 14px;
    border-radius: 2px 0px 0px 2px;
    border: 1px solid #d9d9d9;
    border-right: none;
  }
  .ele-fluid {
    width: 300px !important;
  }
}
</style>
  